<template>
  <div class="nian">
    <div class="jianbian"
      style=" height: 90px; width: 100%; line-height: 50px; padding-left: 30px;  font-size: 24px; ">
      商品热销榜TOP10
    </div>

    <dv-scroll-ranking-board :config="config" style="width:500px;height:340px;padding-left: 30px; margin-bottom: 20px;" />
  </div>
</template>

<script>

export default {
  data() {
    return {
      config: {
        data: [
          {
            name: '<div class="title">PET  百事可乐500ml</div>',
            value: 2000
          },
          {
            name: '<div class="title">PET  百事可乐无糖500ml</div>',
            value: 1800
          },
          {
            name: '<div class="title">PET  美年达百香果菠萝500ml</div>',
            value: 1750
          },
          {
            name: '<div class="title">PET  美年达葡萄500ml</div>',
            value: 1700
          },
          {
            name: '<div class="title">灯影丝牛肉丝(天府清油五香味)</div>',
            value: 800
          },

          {
            name: '<div class="title">PET  美年达橙500ml</div>',
            value: 500
          },
          {
            name: '<div class="title">蛋酥卷奶油</div>',
            value: 400
          },
          {
            name: '<div class="title">乐芙球牛奶</div>',
            value: 500
          },
          {
            name: '<div class="title">今麦郎香辣牛肉板面</div>',
            value: 500
          },
          {
            name: '<div class="title">妙芙欧式巧克力</div>',
            value: 400
          }
        ],
        unit: '件',
        waitTime: 3000
        // valueFormatter({ value }) {
        //   console.warn(arguments)
        //   const reverseNumber = (value + '').split('').reverse()
        //   let valueStr = ''

        //   while (reverseNumber.length) {
        //     const seg = reverseNumber.splice(0, 3).join('')
        //     valueStr += seg
        //     if (seg.length === 3) valueStr += ','
        //   }

        //   return valueStr.split('').reverse().join('')
        // }
      }
    }
  }
}

</script>

<style lang="less">
.nian {
  width: 540px;
  height: 100%;
  background-image: url(../../assets/地图背景图/边框.png);
  background-size: 100% 100%;
}
.title{
  color: #aff4f7;
  line-height: 20px;
}
.dv-scroll-ranking-board .row-item .ranking-info .rank {
  color: #aff4f7;
  margin-right: 5px;
  font-size: 16px;
}
.dv-scroll-ranking-board .row-item .ranking-info .ranking-value{
  color: rgba(255,255,255,0.0);
}
.dv-scroll-ranking-board .row-item .ranking-column .inside-column {
  height: 10px;
  background: -webkit-linear-gradient(left, #346ec0, #35ddf6);
  /*  Safari 5.1 到 6.0 */
  background: -o-linear-gradient(right, #2459a1, #35ddf6);
  /*  Opera 11.6 到 12.0 */
  background: -moz-linear-gradient(right, #2459a1, #35ddf6);
  /*  Fx 3.6 到 15 */
  background: linear-gradient(to right, #2459a1, #35ddf6);
}

</style>
